<template>
  <el-dialog v-move title="归档任务详情" :width="formProps.dialogWidth" :close-on-click-modal="false" v-model="dialogShow"
    append-to-body :before-close="closeDialog">
    <template #title>
      <div>
        <span class="mr-10" style="font-weight: bolder">归档任务详情</span>
        <el-tooltip effect="light" content="刷新" placement="bottom">
          <el-button plain :type="['info', 'warning'][refreshType]" circle size="mini" :loading="refreshLoading"
            @click="refreshDetail" :disabled="refreshCroDisabled" :icon="Refresh"></el-button>
        </el-tooltip>
      </div>
    </template>
    <div style="">
      <div class="mb-10" v-loading="dataLoading">
        <template v-if="data">
          <label-item :dataCloumns="dataCloumns" :data="data">
            <template #C_Status="{ key }">
              <el-tag :type="returnTypeOrLabelName(key, true)">{{
                returnTypeOrLabelName(key)
              }}</el-tag>
            </template>
            <template #C_TaskSource="{ key }">
              <div>{{ returnTypeOrLabelName(key) }}</div>
            </template>
          </label-item>
        </template>
        <template v-if="!data && !dataLoading">
          <span>数据错误!请联系管理员!</span>
        </template>
      </div>
      <z-table :list="list" :columns="columns" :tableProps="tableProps" :tableLoading="tableLoading">
        <template #content="{ row, key }">
          <el-tag v-if="key == 'Status'" :type="statusOptions.find((x) => x.value == row[key]).tagType">{{
            statusOptions.find((x) => x.value == row[key]).label || ""
          }}</el-tag>
          <span v-else>{{ row[key] }}</span>
        </template>
      </z-table>
    </div>
  </el-dialog>
</template>
<script setup>
import {
  Refresh
} from '@element-plus/icons-vue'
</script>
<script>
// 设备子任务运行详情列表
import ZTable from "@/views/_common/table.vue";
import LabelItem from "@/components/LabelItem";
import _ from 'lodash'
export default {
  name: "archive-detail-dialog",
  components: {
    ZTable,
    LabelItem,
  },
  props: {
    visible: { type: Boolean, default: false },
    query: { type: [Number, String], default: "" },
    isAutoRequst: { type: Boolean, default: false },
    controTime: { type: Number, default: 2 },
    controlBtnDisabledShow: { type: Boolean, default: false },
  },
  computed: {
    dialogShow: {
      get() {
        if (this.visible) {
          this.init();
          if (this.isAutoRequst) this.autoReuqestAction();
        } else {
          if (this.Timer) {
            clearTimeout(this.Timer);
            this.Timer = null;
          }
          if (this.isAutoRequestTimer) {
            clearInterval(this.isAutoRequestTimer);
            this.isAutoRequestTimer = null;
          }
        }
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    refreshType: function () {
      return Number(!this.refreshLoading);
    },
    // 刷新机制
    refreshCroDisabled: function () {
      return this.tableLoading || this.dataLoading || this.refreshLoading;
    },
  },
  data() {
    return {
      formProps: {
        dialogWidth: "70%",
      },
      tableProps: {
        border: true,
        hideOperations: true,
        // opsColWith: 140, //不定义默认80
        // showSelection: true, // 是否开启复选
        // expandable: true, //是否展开行
        // showIndexCol: false, //是否显示索引列
        // indexColWidth: 50, //索引列宽度
      },

      columns: [
        { title: "编号", key: "Ordering", width: 65 },
        { title: "任务号", key: "ActionId" },
        { title: "任务编码", key: "ActionNo" },
        { title: "设备名称", key: "EndLocationDeviceName" },
        { title: "优先级", key: "Priority", width: 80 },
        // { title: '任务类型', key: 'taskType', fixed: 'left' },
        // { title: '路径(Id#No)', key: 'bianhao', width: 120 },
        { title: "起始位置", key: "StartLocationUserCode", width: 120 },
        { title: "结束位置", key: "EndLocationUserCode", width: 120 },
        { title: "状态", key: "Status", width: 80 },
        // { title: '警告', key: 'bianhao', width: 240 },
        // { title: '描述', key: 'bianhao', width: 400 },
        { title: "创建时间", key: "CreatedAt" },
        { title: "发送时间", key: "SentAt" },
        { title: "完成时间", key: "FinishedAt" },
      ],
      sourceOptions: [
        { label: "未知", value: 0 },
        { label: "WCS", value: 1 },
        { label: "WMS", value: 2 },
      ],
      statusOptions: [
        { label: "新任务", value: 0, tagType: "primary" },
        { label: "已发送", value: 1, tagType: "success" },
        { label: "正在运行", value: 2, tagType: "success" },
        { label: "暂停", value: 3, tagType: "warning" },
        { label: "发生错误", value: 4, tagType: "danger" },
        { label: "被取消", value: 5, tagType: "info" },
        { label: "已完成", value: 6, tagType: "success" },
        { label: "强制暂停", value: 9, tagType: "warning" },
      ],

      dataCloumns: [
        {
          title: "任务号",
          key: "TaskCode",
          format: (col, data, key, value) => {
            return data.TaskDetailId + "#" + data.TaskCode;
          },
        },
        {
          title: "任务来源",
          key: "TaskSource",
        },
        { title: "任务状态", key: "Status" },
        {
          title: "起始位置",
          key: "StartLocationUserCode",
          format: (col, data, key, value) => {
            return (
              data.StartLocationUserCode + "@" + data.StartLocationDeviceName
            );
          },
        },
        {
          title: "结束位置",
          key: "EndLocationUserCode",
          format: (col, data, key, value) => {
            return data.EndLocationUserCode + "@" + data.EndLocationDeviceName;
          },
        },
        {
          title: "当前位置",
          key: "CurrentLocationUserCode",
          format: (col, data, key, value) => {
            return (
              data.CurrentLocationUserCode +
              "@" +
              data.CurrentLocationDeviceName
            );
          },
        },

        {
          title: "优先级",
          key: "Priority",
        },
        {
          title: "创建时间",
          key: "CreatedAt",
        },
        {
          title: "完成时间",
          key: "FinishedAt",
        },

        {
          title: "托盘号",
          key: "Barcode",
        },
      ],
      dataLoading: false,
      data: {
        Status: 0,
      },
      tableLoading: false,
      list: [],
      submitLoading: false,
      refreshLoading: false,
      // 控制规定时间内不执行操作需要再次刷新的控制枢纽
      controlBtnDisabled: false,
      Timer: null,
      // 是否在更新状态下关闭容器时，传递更新事件
      isAutoResearch: false,
      isAutoRequestTimer: null,
    };
  },
  created() { },
  destroyed() {
    if (this.Timer) {
      clearTimeout(this.Timer);
      this.Timer = null;
    }
    if (this.isAutoRequestTimer) {
      clearInterval(this.isAutoRequestTimer);
      this.isAutoRequestTimer = null;
    }
  },
  methods: {

    // 返回相对应的字符串
    returnTypeOrLabelName(key, isType = false) {
      switch (key) {
        case "Status":
          if (isType) {
            return (
              this.statusOptions.find((x) => x.value == this.data[key])
                ?.tagType || "info"
            );
          } else {
            return (
              this.statusOptions.find((x) => x.value == this.data[key])
                ?.label || ""
            );
          }
        case "TaskSource":
          if (isType) {
            return (
              this.sourceOptions.find((x) => x.value == this.data[key])
                ?.tagType || "info"
            );
          } else {
            return (
              this.sourceOptions.find((x) => x.value == this.data[key])
                ?.label || ""
            );
          }
      }
    },
    // 刷新
    refreshDetail() {
      this.refreshLoading = true;
      this.init();
    },
    // 创建可持续化
    setControlBtn() {
      if (this.controlBtnDisabledShow) {
        this.Timer = setTimeout(() => {
          this.controlBtnDisabled = true;
        }, this.controTime * 1000);
      }
    },
    // 创建接口自动触发
    autoReuqestAction() {
      if (this.isAutoRequestTimer) {
        return;
      }
      this.isAutoRequestTimer = setInterval(() => {
        this.init();
      }, 1000 * this.controTime);
    },
    // 初始化
    init() {
      // 增加定时装置，在等待x秒后需要点击刷新按钮
      this.controlBtnDisabled = false;
      if (this.Timer) {
        clearTimeout(this.Timer);
      }
      this.setControlBtn();
      this.dataLoading = true;
      this.tableLoading = true;
      if (!this.query) {
        this.dataLoading = false;
        this.tableLoading = false;
        return;
      }
      this.getTableList();
      this.getData();
      setTimeout(() => {
        this.refreshLoading = false;
      });
    },
    formatList(data) {
      return data.map((x) => {
        return x;
      });
    },
    formatData(data) {
      let tmp = _.cloneDeep(data);
      return tmp;
    },
    // 获取list
    getTableList() {
      this.http
        .get(this.$api.wcsUrl + "wcs/task/GetEquipmentActionFile", {
          taskDetalisId: this.query || "",
        })
        .then((r) => {
          this.list = this.formatList(r);
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    // 获取数据
    getData() {
      this.http
        .get(this.$api.wcsUrl + "wcs/task/GetDetailTasksByIdFile", {
          taskDetalisId: this.query,
        })
        .then((r) => {
          this.data = this.formatData(r);
        })
        .finally(() => {
          this.dataLoading = false;
        });
    },
    closeDialog() {
      if (this.isAutoResearch) {
        this.$emit("statusSuccesCallBack");
        this.isAutoResearch = false;
      }
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped></style>
